<template>
  <div>
    <Navigation ref="nav_ref" @callbackComponent="callbackComponent" />
    <!-- 内容页 -->
    <div id="myCarousel" class="carousel slide">
      <el-carousel :interval="4000" arrow="hover" ref="carousel" :height="bannerHeight + 'px'" id="el-carousel">
        <el-carousel-item  v-for="(item,index) in banner" :key="index">
          <img class="index_banner" :src="item.url" ref="bannerHeight"  @load="imgLoad" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div id="index_ywzs" class="container">
      <div class="index_ywzs_content" v-for="(item,index) in modularList" :key="index">
        <div class="ywzs_cell">
          <div class="ywzs_content">
            <span :class="'iconfont '+item.icon"></span>
            <router-link class="ywzs_title" :to='item.path'>{{ item.title }}</router-link>
            <router-link class="ywzs_desc" :to='item.path'>{{ item.remark }}</router-link>
          </div>
        </div>
      </div>
    </div>
    <div id="index_news">
      <div class="container">
        <div class="index_h">
          <h3 class="index_h3">OUR NEWS<br/></h3>
          <h4 class="index_h4">我们的动态</h4>
          <h5 class="index_h5">安玛尔，祝您做到更好</h5>
        </div>
        <div class="index_news_content">
          <div id="index_news_lists">
            <div class="row">
              <div class="col-md-6 col-sm-12">
                <h3>行业新闻</h3>
                <div v-for="(l_item,l_index) in articleList.left" :key="l_index">
                  <a href="javascript:void(0)" class="row index_news_imgs" v-if="l_index === 0" @click="getNewDetail(l_item.id)">
                    <div class="col-md-3 col-sm-12 thumbnail"
                         :style="{background:'url('+l_item.img+') no-repeat 50%/cover'}"></div>
                    <div class="col-md-7 col-sm-12">
                      <h4 class="index_news_title">{{ l_item.title }}</h4>
                      <div class="index_news_desc">{{ l_item.remark }}</div>
                    </div>
                    <div class="col-md-2 col-sm-12 hidden-xs hidden-sm index_news_date">
                      {{ l_item.create_time  | formatTimer }}
                    </div>
                  </a>

                  <a href="javascript:void(0)" class="index_news_cell" v-else  @click="getNewDetail(l_item.id)">
                    <div v-if="l_index < 7">
                      <div class="col-md-9  index_news_title">
                        {{ l_item.title }}
                      </div>
                      <div class="index_news_date col-md-3 hide-sm hidden-xs">【{{ l_item.create_time | formatTimer }}】
                      </div>
                    </div>
                  </a>
                </div>
                <div class="index_news_more">
                  <a href="javascript:void(0)" @click="selectAll(1)" class="">查看更多</a>
                </div>
              </div>

              <div class="col-md-6 col-sm-12">
                <h3>公司动态</h3>
                <div v-for="(r_item,r_index) in articleList.right" :key="r_index">
                  <a href="javascript:void(0)" class="row index_news_imgs" v-if="r_index === 0" @click="getNewDetail(r_item.id)">
                    <div class="col-md-3 col-sm-12 thumbnail"
                         :style="{background:'url('+r_item.img+') no-repeat 50%/cover'}"></div>
                    <div class="col-md-7 col-sm-12">
                      <h4 class="index_news_title">{{ r_item.title }}</h4>
                      <div class="index_news_desc">{{ r_item.remark }}</div>
                    </div>
                    <div class="col-md-2 col-sm-12 hidden-xs hidden-sm index_news_date">
                      {{ r_item.create_time  | formatTimer }}
                    </div>
                  </a>
                  <a href="javascript:void(0)" class="index_news_cell" v-else @click="getNewDetail(r_item.id)">
                   <div v-if="r_index < 7">
                     <div class="col-md-9  index_news_title">
                       {{ r_item.title }}
                     </div>
                     <div class="index_news_date col-md-3 hide-sm hidden-xs">【{{
                         r_item.create_time | formatTimer
                       }}】
                     </div>
                   </div>
                  </a>
                </div>
                <div class="index_news_more">
                  <a href="javascript:void(0)" @click="selectAll(2)" class="">查看更多</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="index_hzhb">
      <div class="container">
        <div class="index_h">
          <h3 class="index_h3">合作伙伴<br/></h3>
          <h4 class="index_h4">PARTNER</h4>
          <h5 class="index_h5">安玛尔，祝您做到更好</h5>
        </div>
        <div class="index_hzhb">
          <div class="box">

            <div class="picbox">
              <!-- 此处读取10个 -->
              <vue-seamless-scroll
                :data="listData"
                :class-option="classOption"
                class="warp">
                <ul class="ul-item">
                  <li class="li-item" v-for="(item, index) in listData" :key="index">
                    <img :src="item.url.url" :alt="item.name" style="width:200px;" />
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <div id="index_zx">-->
<!--      <div class="container">-->
<!--        <div class="index_zx_content">-->
<!--          <h3>获得适合您企业的服务质量管理方案，安玛尔为您定制专属服务</h3>-->
<!--          <a href="#" class="btn btn-default">立即咨询</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <!-- 尾部 -->
    <Footer/>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Navigation from '../../components/Navigation'
import Footer from '../../components/Footer'
export default {
  name: 'index',
  components: {
    Navigation,
    Footer,
    vueSeamlessScroll
  },
  data () {
    return {
      isRouterAlive: true,
      bannerHeight: '',
      showHeight:'',
      banner: [],
      modularList: [],
      articleList: [],
      queryInfo: {
        limit: 5,
        page: 1
      },
      listData: [],
      classOption: {
        limitMoveNum: 2,
        direction: 3,
      }
    }
  },
  created () {
    //获取模块
    this.getModularList()
    //新闻读取
    this.getArticleList()
    //合作客户
    this.getCooperList()
  },
  mounted () {
    this.imgLoad();
    window.addEventListener('resize',() => {
      this.imgLoad();
    },false)
  },
  //过滤器
  filters: {
    formatTimer: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d
    }
  },
  methods: {
    imgLoad(){
      this.$nextTick(()=>{
        let ref = this.$refs
        this.bannerHeight=ref.bannerHeight&&ref.bannerHeight.length?ref.bannerHeight[0].height:'';
      })
    },
    //合作客户
    async getCooperList () {
      const {data: res} = await this.$http.get('home/cooper_list', {
        params: {
          limit: 10,
          page: 1
        }
      })
      if (res.code !== 200) return false
      this.listData = res.data.list
    },
    //模块
    async getModularList () {
      const {data: res} = await this.$http.get('home/modular_list', {params: this.queryInfo})
      if (res.code !== 200) return false
      this.modularList = res.data.list
    },
    //新闻
    async getArticleList () {
      const {data: res} = await this.$http.get('home/home_article_list')
      if (res.code !== 200) return false
      this.articleList = res.data.list
    },
    callbackComponent (params) {
      params.function && this[params.function](params.data)
    },
    getBannerList (data) {
      this.banner = data.image
    },
    getNewDetail(data){
      sessionStorage.setItem('new_id',data)
      this.$router.push('/detail/dynamic_detail');
    },
    selectAll(){
      this.$router.push('/dynamic');
    }
  }
}
</script>


<style lang="scss" scoped>
.home-container {
  height: 100%;
}

.el-header, .el-footer {
  padding: 0;
}

.el-main {

  line-height: 160px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.warp {
  width: 330px * 4;
  height: 150px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 220px;
        height: 150px;
        margin-right: 10px;
        line-height: 150px;
        border: 1px solid #999;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}

</style>
